<!--
 * @Author: GKN
 * @Date: 2023-08-21 17:08:18
 * @LastEditTime: 2024-04-22 10:13:46
 * @LastEditors: GKN
 * @Description: 
 * @FilePath: \mod\src\view\case\index.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
    <div class="widthFull back-fff" style="height: 196px;">
        <adImgView :src="ad_list2.length>0?ad_list2[0].img:''" @click="proxy.$comJs.openUrl(ad_list2.length>0?ad_list2[0]:'')" />
    </div>
    <div class="header widthFull flex flex-j-c">
        <div class="flex a-tab1 widthFull flex-j-c flex-align ">
            <div v-for="(item,i) in head_tabs" :key="i" v-show="item.isNav==1" :class="i==head_tab_index?'a-tab-p-active a-tab-p':'a-tab-p'" @click="headtabclick(i)">{{ item.name }}</div>
        </div>
    </div>
    <div class="main mainPadding">
        <div class="max-w">
        <div class="m1 MarT">
            <div class="title cursor-p" style="text-align: center;" @click="proxy.$comJs.openInfo('案例征集', topInfo.name, topInfo)">{{ topInfo.name }}</div>
            <div class="font-content font-MTop12 font-text-al-l omit-3">{{ topInfo.blurb }}</div>
            <div class="MarT">
                <el-row :gutter="20">
                    <!-- <el-col :span="8" v-for="item in topList" :key="item">
                        <div class="file-view cursor-p" @mouseenter="enter(0)" @mouseleave="leave">
                            <img class="ad-img" src="https://www.cnr.cn/2023/images/content/logos/jingdong.jpg" alt="">
                            <div class="file-mask" v-if="file_index == 0">
                                <el-popover
                                    placement="bottom-end"
                                    :width="200"
                                    trigger="click"
                                    :teleported="false"
                                >
                                    <template #reference>
                                        <div class="more cursor-p">
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                        </div>
                                    </template>
                                    <div style="width: 160px;" >
                                        <div class="font-title cursor-p" style="text-align:center;" @click="amplify(0)">放大查看</div>
                                        <div class="font-title cursor-p MarT" style="text-align:center;">下载附件</div>
                                    </div>
                                </el-popover>
                            </div>
                        </div>
                    </el-col> -->
                </el-row>
            </div>
        </div>
        <div class="MarT border-r6 back-fff ad8view" style="min-height: 334px;">
            <TitleView class="MarT35" title="征集"></TitleView>
            <!-- <div class="title omit-2 font-text-al-l zjview" style="margin-top: 38px;">主题与内容：</div>
            <div class="title omit-2 font-text-al-l zjview">征集要求：</div>
            <div class="title omit-2 font-text-al-l zjview">编写体例：</div>
            <div class="title omit-2 font-text-al-l zjview">申报方式：</div>
            <div class="title omit-2 font-text-al-l zjview">征集时间：</div>
            <div class="title omit-2 font-text-al-l zjview">宣传展示：</div> -->
            <div style="padding: 20px;">
                <div v-html="topInfo.cont"></div>
            </div>
        </div>
        <FrameView class="p-l p-r p-b">
            <template v-slot:m>
                <TitleView class="MarT35" title="案例展示"></TitleView>
                <div class="MarT">
                    <div class="alView" v-for="(item,i) in list_alzs" :key="i" v-show="item.isNav==1" style="padding-bottom:16px;">
                        <el-row :gutter="16">
                            <el-col :span="1">
                                <div class="titleView">
                                    <div class="t">{{ item.name }}</div>
                                </div>
                            </el-col>
                            <el-col :span="23">
                                <div class="flex" v-if="item.list">
                                    <div class="itemView p-t p-l p-r p-b shadow-1 cursor-p po-re" v-for="(item1,i1) in item.list" :key="i1" style="width:25%;margin-left: 16px;" @click="goInfo(item1,'案例展示')">
                                        <div class="title omit-2 font-text-al-l">{{ item1.name }}</div>
                                        <div class="desc t-indent omit-4 MarT14 font-text-al-l">{{ item1.blurb }}</div>
                                        <div class="more-1 po-ab-r-0" style="bottom:5px;right: 20px;">
                                            查看详情
                                            <img src="@/assets/img/sjx.png" alt="">
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                
            </template>
        </FrameView>
        <FrameView style="height:220px;">
            <template v-slot:m>
                <adImgView :src="ad_list1.length>0?ad_list1[0].img:''" @click="proxy.$comJs.openUrl(ad_list1.length>0?ad_list1[0]:'')" />
            </template>
        </FrameView>
        <FrameView>
            <template v-slot:m>
                <Card1 title="历届会议" :more="false">
                    <template v-slot:right>
                        <div class="flex a-tab">
                            <div v-for="(item,i) in ljhy_tabs" :key="i" :class="i==ljhy_tab_index?'a-tab-p-active a-tab-p':'a-tab-p'" @click="tabclick1(i)">{{ item }}</div>
                        </div>
                    </template>
                    <template v-slot:main1>
                        <div style="min-height: 250px;">
                            <myEmpty v-if="list_ljhy.length==0||!list_ljhy" />
                            <el-row :gutter="20">
                                <el-col :span="6" v-for="(item,i) in list_ljhy" :key="i" class="MarB" @click="goInfo(item,'历届会议')">
                                    <div style="height: 230px;">
                                        <div class="ad-img border-r6" style="height: 164px;">
                                            <imgView :src="item.thumb" />
                                        </div>
                                        <div class="font-title font-text-al-l p-t omit-2">{{ item.name }}</div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        
                    </template>
                </Card1>
            </template>
        </FrameView>
        <FrameView>
            <template v-slot:m>
                <Card1 title="第三方视点" :more="false" @moreClick="more(1)">
                    <template v-slot:main1>
                        <myEmpty v-if="list_sfsd.length==0||!list_sfsd" />
                        <el-row :gutter="20">
                            <el-col :span="8" v-for="(item,i) in list_sfsd" :key="i" class="MarB cursor-p" @click="goInfo(item,'第三方视点')">
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <div class="ad-img border-r6" style="height: 100px;">
                                            <imgView :src="item.thumb"  />
                                        </div>
                                    </el-col>
                                    <el-col :span="12">
                                        <div class="font-title font-text-al-l p-t omit-3">{{ item.name }}</div>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </template>
                </Card1>
            </template>
        </FrameView>
        <FrameView>
            <template v-slot:m>
                <Card1 title="合作单位" :more="false" @moreClick="more(2)">
                    <template v-slot:main1>
                        <myEmpty v-if="list_hzdw1.length==0||!list_hzdw1" />
                        <div class="flex flex-w p-b">
                            <div v-for="(item,i) in list_hzdw1" :key="i" @click="openUrl(item)" style="width:20%;height:132px;padding-right:20px;margin-bottom:25px;" class="border-r6 shadow-3">
                                <imgView :src="item.icon" />
                            </div>
                        </div>
                        <!-- <div class="flex flex-w">
                            <div v-for="(item,i) in list_hzdw2" :key="i" style="width:20%;padding-right:20px;margin-bottom:20px;" class="omit">
                                <div class="font-title font-text-al-l p-t omit-3">{{ item.title }}</div>
                            </div>
                        </div> -->
                        <!-- <div class="more1">查看更多</div> -->
                    </template>
                </Card1>
            </template>
        </FrameView>
        </div>
    </div>
    <div class="adL adWH" v-if="isleft">
        <AD1 direction="left" type="r" :url="ad.lurl.img" @close="close('left')" @click.stop="proxy.$comJs.openUrl(ad.lurl)" />

    </div>
    <div class="adR adWH" v-if="isright">
        <AD1 direction="right" type="r" :url="ad.rurl.img" @close="close('right')" @click.stop="proxy.$comJs.openUrl(ad.rurl)" />
    </div>
</template>

<script setup>
    import { ref,reactive, onMounted,getCurrentInstance } from "vue";
    const { proxy } = getCurrentInstance();
    import CryptoJS from 'crypto-js';
    import TitleView from '../components/title.vue';
    import FrameView from '../components/frame.vue';
    import Card1 from '../components/card1.vue';
    import { useRoute, useRouter } from "vue-router";
    import AD1 from '../components/ad.vue'
    const Router = useRouter();
    // 导航下对应模块
    const list_children = proxy.$comJs.extract(JSON.parse(localStorage.getItem( 'headerTabs' )),JSON.parse(CryptoJS.AES.decrypt(Router.currentRoute.value.query.ob,'name').toString(CryptoJS.enc.Utf8)),'name')[0].children
    // 逻辑
    const head_tab_index = ref(-1)
    const head_tabs = ref(list_children)
    const headtabclick = (i) =>{
        head_tab_index.value = i
        console.log(list_children[i])
        if(list_children[i].children.length>0){
            const ob = CryptoJS.AES.encrypt(JSON.stringify(list_children[i]),'children').toString();
            Router.push({
                path:'/case/info1',
                query:{
                    ob:ob
                }
            });
        }
    }
    // 广告
    const ad_list1= ref([])
    // 顶部广告
    const ad_list2 = ref([])
    // 广告
  const ad = ref({
    rurl:'',
    lurl:''
  })
    const getAd=()=>{
        proxy.$comJs.getAd(proxy.$comJs.extract(JSON.parse(localStorage.getItem( 'headerTabs' )),JSON.parse(CryptoJS.AES.decrypt(Router.currentRoute.value.query.ob,'name').toString(CryptoJS.enc.Utf8)),'name')[0].id,0,function(res){
            var list1 = [],list2=[],list3=[],list4=[],list5=[]
            res.list.map((item)=>{
                if(item.location == 1){
                    list2.push(item)
                }
                if(item.nid == 163){
                    list1.push(item)
                }
                if(item.location == 3){
                    ad.value.lurl = item
                }
                if(item.location == 4){
                    ad.value.rurl = item
                }
            })
            ad_list1.value = list1.length>0?list1:[]
            ad_list2.value = list2.length>0?list2:[]

        })
    }
    getAd()
    
    const isleft = ref(true)
    const isright = ref(true)
    const close=(type)=>{
        if(type == 'left'){
            isleft.value = false
        }
        if(type == 'right'){
            isright.value = false
        }
    }
    const getAdzr=()=>{
        proxy.$http.request(proxy.$api.list_advert+'?nid=0','get',{},false, function (res) {
        if(res&&res.data){
            res.data.data.list.map((item)=>{
            if(item.location == 3){
                ad.value.lurl = item
            }
            if(item.location == 4){
                ad.value.rurl = item
            }
            })
            
        }
        })
    }
    // getAdzr
    const topList = ref(null)
    const file_index = ref(-1)
    const is_pop = ref(false)
    const enter=(i)=>{
        file_index.value = i
    }
    const leave=(i)=>{
        // alert(1)
        file_index.value = -1
    }
    const amplify=()=>{

    }
    // 页头部数据
    const topInfo=ref({
        blurb:'',
        cont:'',
        name:''
    })
    const getTop=()=>{
      proxy.$http.request(proxy.$api.news_other+'?pageSize=3&sty=6','get',{},false, function (res) {
        if(res&&res.data){
            if(res.data.data.list!= undefined){
                topInfo.value = res.data.data.list.length>0?{
                    blurb:res.data.data.list[0].blurb,
                    cont:res.data.data.list[0].cont,
                    name:res.data.data.list[0].name,
                    newsId:res.data.data.list[0].newsId
                }:{blurb:'',cont:'',name:''}
            } 
        }
      })
    }
    getTop()
    // 案例展示
    const list_alzs = ref(list_children)
    const getlist_alzs=()=>{
        
        list_children.map((item,i)=>{
            proxy.$http.request(proxy.$api.caseList+'?nextTag=0&nid='+item.id+'&nty=1&pageSize=4&prevTag=0','get',{},false, function (res) {
                console.log(item)
                console.log('案例展示',res.data.data.list)
                if(res&&res.data){
                    list_alzs.value[i].list = res.data.data.list
                }
            })
        })
        
    }
    getlist_alzs()
    // 管理创新详情
    const info1 = (item,type)=>{
        // ElMessage('案例征集-详情');
        
        
    }
    // 历届会议
    const ljhy_tab_index = ref(0)
    const ljhy_tabs = ref([])
    
    const list_ljhy=ref([])
    const getlist_ljhy=(y)=>{
        const id = 163
        proxy.$http.request(proxy.$api.caseList+'?nextTag=0&nid='+id+'&pageSize=4&nty=1&prevTag=0&year='+y,'get',{},false, function (res) {
            if(res&&res.data){
                if(res.data.data.list!= undefined){
                    list_ljhy.value = res.data.data.list
                } 
            }
        })
        // proxy.$comJs.getNewList(4,163,{nextTag:0,prevTag:0},y,(data)=>{
        //     list_ljhy.value = data.list
        // })
    }
    const getljhy_tabs=()=>{
        proxy.$http.request(proxy.$api.get_resource,'get',{},false, function (res) {
            if(res&&res.data){
                ljhy_tabs.value = res.data.data.year
                getlist_ljhy(ljhy_tabs.value[0])
            }
        })
    }
    getljhy_tabs()
    
    const tabclick1 = (i)=>{
        ljhy_tab_index.value = i
        getlist_ljhy(ljhy_tabs.value[i])
    }
    // 更多
    const more =(type)=>{
        // if(type == 1){ElMessage('第三方视点'); return;} 
        // if(type == 2){ElMessage('合作单位'); return;}
    }
    // 第三方视点
    const list_sfsd = ref([])
    // 148
    const getlist_sfsd=()=>{
        proxy.$http.request(proxy.$api.caseList+'?nextTag=0&nid=148&pageSize=8&nty=1&prevTag=0&year=','get',{},false, function (res) {
            if(res&&res.data){
                if(res.data.data.list!= undefined){
                    list_sfsd.value = res.data.data.list
                } 
            }
        })
    }
    getlist_sfsd()
    // 合作单位
    const list_hzdw1=ref([])
    const getlist_hzdw1=()=>{
        proxy.$http.request(proxy.$api.unitList,'get',{},false, function (res) {
            if(res&&res.data){
                if(Object.keys(res.data).length!==0){
                    list_hzdw1.value = res.data.data.link?res.data.data.link:[]
                } 
            }
        })
    }
    getlist_hzdw1()
    const list_hzdw2=ref([
        {title:'hghuigjhj'},{title:'hghuigjhj'},{title:'hghuigjhj'},{title:'hghuigjhj'},{title:'hghuigjhj'},{title:'hghuigjhj'},{title:'hghuigjhj'},{title:'hghuigjhj'}
    ])
    const goInfo=(item,name)=>{
        const routeUrl = Router.resolve({
            path:'/animatedly/info',
            query:{
                ob:proxy.$comJs.encry({
                    title:name,
                    id:item.newsId,
                    path:'/animatedly/list',
                    first_title:'案例征集',
                    first_path:-1
                })
            }
        });
        window.open(routeUrl.href, "_blank");
    }
    const openUrl=(item)=>{
        if(item.ty == 1){
            window.location.href = item.url
        }
        if(item.ty == 2){
            window.open(item.url)
        }
    }
</script>

<style lang='less' scoped>
    .m1{
        background: #fff;
        padding:38px 78px;
        box-sizing: border-box;
        .title{
            font-size: 40px;
            font-family: SourceHanSansCN-Medium, SourceHanSansCN;
            font-weight: 500;
            color: #D10B00;
            line-height: 50px;
        }
    }
    .header{
        background: #d10b00;
        height: 80px;
    }
    .file-view{
        height: 538px;
        position: relative;
        box-shadow:0 0 10px rgba(5, 5, 5, 0.2);
        .file-mask{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background:rgba(0,0,0,.3) ;
            display: flex;
            justify-content: flex-end;
            padding: 20px 20px 0 0;
        }
    }
    .more{
        width: 56px;
        height: 56px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-radius: 6px;
        
        div{
            background: #4a505c;
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }
    }
    .alView{
        .titleView{
            width: 40px;
            height: 190px;
            // background: #d42c23;
            display: flex;
            align-items: center;
            justify-content: center;
            background:url('@/assets/img/title-tip1.jpg');
            background-size: 100% 100%;
            .t{
                color: #fff;
                width: 20px;
                margin: 0 auto;
                line-height: 26px;
                font-size: 20px;
            }
        }
        .itemView{
            height: 202px;
            background: linear-gradient(to bottom, #fffbf8, #ffe2ce);
            .title{
                font-size: 16px;
                font-weight: bold;
                color: #d42c23;
                line-height: 24px;
            }
            .desc{
                font-size: 14px;
                color: #333;
                line-height: 24px;
            }
        }
    }
    .more1{
    width:180px;
    height: 40px;
    color: #d10b00;
    background: #fff2f1;
    border:1px solid #d10b00;
    border-radius: 6px;
    line-height: 40px;
    margin: 0 auto;
    cursor: pointer;
  }
  .ad8view{
    min-height: 334px;background: url('@/assets/img/ad8.png');background-size: 100% 100%;
  }
  .zjview{
    font-weight: bold;margin-bottom: 12px;
    padding-left: 168px;
  }
</style>

